<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户安全-{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <!--公用css引用-->
    @include('front.common.style')

    <!--END/公用css引用-->
    <link rel="stylesheet" href="../dist/css/userCenter.css">
</head>
<body>

<!--公共头部-->
@include('front.common.header')

<!--END/公共头部-->

<div class="inbox user-center">
    <div class="layout-margin unend">
        <div class="sidebar-end"></div>
        <div class="sidebar-start">
        @include('front.common.leftnav')

        </div>

        <!--主体部分-->
        <div class="container">
            <div class="container-inner u-safe">
                <div class="ui-brd-box1">
                    <div class="tit-2 tit-skin-3 top-tit">
                        <span class="h fn-ml20">账户安全中心</span>
                    </div>
                    <div class="tit-3 tit-skin-2 sub-tit">
                        <span class="h fn-ml20">账号安全：</span>
                        <div class="fn-fl progress-wrap">
                            <div class="bl-progress bl-progress-striped fn-dib">
                                <div class="bl-progress-bar progress-bar-success" style="width: 80%;"></div>
                            </div>
                            <span class="text-color-success">较高</span>
                        </div>
                        <span class="fn-fl text-color-6">建议您启动全部安全设置，以保障账户及资金安全。</span>
                    </div>

                    <?php
                    if(Session::has('step')) {
                    $step = Session::get('step');
                    }
                    ?>

                    <ul class="safe-list">
                    <li>

                            <div class="safe-head">
                                <a href="javascript:;" class="fn-dib more js-edit">修改</a>
                                <i class="icon icon-safe-success"></i>
                                <span class="fn-dib label">修改密码</span>
                                <span class="fn-dib status warning-color">密码为6-20位字符，建议由字母、数字、符号两种以上组合</span>
                            </div>
                            <div @if(Session::get('message')||$errors->has()) class="safe-form fn-rel" @else class="safe-form fn-rel fn-hide" @endif>
                                <div class="bl-tip-box tip-skin-def">
                                    <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
                                    <div class="bl-tip-con">
                                    @if($step=="step_1")

                                        {{--<form action="#" class="js-form bl-form bl-formhor form-L">--}}
                                        {!! Form::model($user,['route'=>'my.account_safe.resetPaw','class'=>'js-form bl-form bl-formhor form-L fn-mt20'])  !!}
                                            {!! Form::hidden('_method', 'PUT') !!}

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>原密码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput elementJs" required="" autocomplete="off" name="oldPwd" type="password" value="" placeholder="请填写新密码">
                                                    @if($errors->has('oldPwd'))
                                                    <div class="error"> {{$errors->first('oldPwd')}}</div>
                                                    @else
                                                    {{--<div class="form-help">由字母加数字或符号，至少两种以上字符组成的6-20位字符，区分大小写</div>--}}
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>新密码：</label>
                                                <div class="controls">
                                                {!! Form::input('password','newPwd',old('newPwd'),array('id'=>'newPwd', 'class'=>'fn-tinput','autocomplete'=>'off','placeholder'=>'输入密码','required'=>'required'))!!}
                                                    {{--<input id="newPwd" class="fn-tinput elementJs" required="" autocomplete="off" name="newPwd" type="password" value="" placeholder="请填写新密码">--}}
                                                    @if($errors->has('newPwd'))
                                                    <div class="error"> {{$errors->first('newPwd')}}</div>
                                                    @else
                                                    {{--<div class="form-help">由字母加数字或符号，至少两种以上字符组成的6-20位字符，区分大小写</div>--}}
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>再次输入新密码：</label>
                                                <div class="controls">
                                                {!! Form::input('password','password_confirmation',old('password_confirmation'),array('id'=>'password_confirmation', 'class'=>'fn-tinput','autocomplete'=>'off','placeholder'=>'输入密码','required'=>'required'))!!}
                                                    {{--<input class="fn-tinput elementJs" required="" name="password_confirmation" type="password" value="" placeholder="请再次填写新密码">--}}
                                                    @if($errors->has('password_confirmation'))<div class="error">{{$errors->first('password_confirmation')}}</div>@endif
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>验证码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput fn-tinput-small elementJs" required="" name="code" type="text" value="" placeholder="验证码">
                                                    <a class="chk-code" href="javascript:;"><img style="width:100px;height:36px;" src="{{ URL('captcha/0.1') }}"  id="chkCode" alt=""></a>
                                                    <span>看不清？<a class="text-color-8" href="javascript:;" onclick="javascript:re_captcha();">换一张</a></span>
                                                    @if($errors->has('code'))<div class="error">{{$errors->first('code')}}</div>@endif
                                                </div>
                                            </div>
                                            @if(Session::has('message'))
                                            <div class="bl-form-group">
                                                <label class="fn-vhide fn-mr6">错误信息：</label>
                                                <div class="error"> {{Session::get('message')}}</div>
                                            </div>
                                            @endif
                                            <div class="bl-form-group bl-form-btns">
                                                <label class="fn-vhide">提交：</label>
                                                <div class="controls">
                                                    <button class="fn-btn btn-primary fn-mr8 btn-save" type="submit">确定</button>
                                                </div>
                                            </div>
                                        {!! Form::close()  !!}
                                        {{--</form>--}}
                                        @elseif($step=="step_2")
                                        <div class="success-tip">
                                            <p>您的登录密码已修改！ <span class="js-num">3</span>秒后重新登录。 <a href="/user/login" class="text-color-9 link">立即登录</a></p>
                                        </div>
                                        @endif
                                        <!--END/第三步-->

                                    </div>
                                </div>


                            </div>
                        </li>
                        <li class="ui-nobrd-b">
                            @if($user->check_type==2)
                            <div class="safe-head">
                                <span class="more">
                                    <a href="javascript:;" class="fn-btn fn-btn-small">已绑定</a>
                                    <a href="javascript:;" class="fn-dib js-edit">修改</a>
                                </span>
                                <i class="icon icon-safe-warning"></i>
                                <span class="fn-dib label">邮箱验证</span>
                                <span class="fn-dib status text-color-7">您的邮箱：{{$user->email}}</span>

                            </div>
                            @else
                            <div class="safe-head">
                                <span class="more js-edit">
                                    <a href="javascript:;" class="fn-btn fn-btn-small">绑定邮箱</a>
                                </span>
                                <i class="icon icon-safe-warning"></i>
                                <span class="fn-dib label">邮箱验证</span>
                                <span class="fn-dib status text-color-7">验证后，可用于快速找回登录密码，接收账户余额变动提醒。</span>

                            </div>
                            @endif
                            <div class="safe-form fn-rel fn-hide">
                                <div class="bl-tip-box tip-skin-def">
                                    <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
                                    <div class="bl-tip-con">

                                        <form method="POST" action="" class="J-emailForm bl-form bl-formhor form-L fn-mt20" novalidate="novalidate">
                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>邮箱：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput elementJs" required="" id="email" name="email" type="text" value="" placeholder="请输入常用邮箱">
                                                </div>
                                            </div>

                                            <div class="bl-form-group bl-form-btns">
                                                <label class="fn-vhide">提交：</label>
                                                <input type="hidden" name="user_id" value="{{$user->id}}">
                                                <div class="controls">
                                                    <button id="sendEmail" type="submit" data-id="{{$user->id}}" class="fn-btn fn-btn-small">确定</button>
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>


                            </div>
                        </li>

                    </ul>

                </div>


            </div>

        </div>
        <!--END/主体部分-->

    </div>
</div>

<!--公共尾部-->
@include('front.common.footer')
<!--END/公共尾部-->

<!--公用js引用-->
@include('front.common.script')

<!--END/公用js引用-->
<script src="../dist/js/jquery.validation.js"></script>
<script>
    var jqForm=$('.js-form');

    jqForm.validate({
        rules:{
            oldPwd:{
                pwd:true
            },
            newPwd:{
                pwd:true
            },
            password_confirmation:{
                equalTo:'#newPwd'
            }
        },
        messages:{
            oldPwd:{
                required:'请填写原始密码',
                pwd:'密码6-20位字符，建议由字母、数字、符号两种以上组合'
            },
            newPwd:{
                required:'请填写新密码',
                pwd:'密码6-20位字符，建议由字母、数字、符号两种以上组合'
            },
            password_confirmation:{
                required:'请再次填写新密码',
                equalTo:'两次输入密码不一致'
            },
            code:{
                required:'请填写验证码'
            }
        },
        errorPlacement: function(error, element) {
            var parentItem=element.parent(".controls"),
                    errorItem=parentItem.find('.error');
            if(errorItem.length==2){
                errorItem.eq(1).remove();
            }
            error.appendTo(parentItem);
        }
    });

 function re_captcha() {
        var $url = "{{ URL('captcha') }}" + "/" + Math.random();
        $('#chkCode').attr('src',$url);
  }


    $(function(){
       var editBtn=$('.js-edit');

        //修改
        editBtn.on('click',function(){
            var safeWrap=$(this).closest('.safe-head').next('.safe-form');
            safeWrap.slideToggle();
        });

    });

    var numItem=$('.js-num');
    if(numItem.length){
        var num=3;
        setTimeout(function(){
            num--;
            numItem.text(num);
            if(num<1){
                window.location.href='/user/login';
            }else{
                setTimeout(arguments.callee(),1000);
            }
        },1000);
    }


    $('.J-emailForm').validate({
        rules:{
            email:{
                email:true
            }
        },
        messages:{
            email:{
                required:'请填写邮箱',
                email:'请填写正确的邮箱格式'
            }
        },
        errorPlacement: function(error, element) {
            var parentItem=element.parent(".controls"),
                    errorItem=parentItem.find('.error');
            if(errorItem.length==2){
                errorItem.eq(1).remove();
            }
            error.appendTo(parentItem);
        },
        submitHandler: function(form) {
            var jqForm=$(form),btn = jqForm.find('#sendEmail');
            btn.attr('disabled',true).addClass('disabled');
            $.ajax({
                url:"{{ URL('email/send') }}"+ "?t=" + Math.random(),
                data:jqForm.serialize(),
                type:'post',
                dataType:'json',
                success:function(res){
                    if(res.status==1){
                        layer.msg('验证邮件已发送到您的邮箱',{offset:'10px'})
                    }
                    btn.attr('disabled',false).removeClass('disabled');
                },
                error:function(e){
                    btn.attr('disabled',false).removeClass('disabled');
                }
            });
        }

    });


</script>
</body>
</html>